<template>
 <div class='leftTree'>
  <p
  class="w-[180px] mr-[10px] mb-[10px]"
  ><el-input
     v-model="name"
      placeholder="输入部门名称搜索"
      @input="searchDept"
      ></el-input></p>
  <el-tree
  :props="props"
  lazy
  :data="data"
  :load="loadNode"
  @node-click="handleNodeClick">
</el-tree>
 </div>
</template>

<script>
import { getDept } from '@/api/dept.js'
import _ from 'lodash'
export default {
  name: 'leftTree',
  props: {
  },
  components: {

  },
  data () {
    return {
      data: [],
      // 查询部门
      name: '',
      input: '',
      props: {
        label: 'name',
        children: 'zones',
        isLeaf: 'leaf'
      }

    }
  },
  methods: {
    // 查询部门
    searchDept: _.debounce(
      function () {
        getDept(this.name && { name: this.name }).then(res => {
          this.data = res.content
        })
      }, 500),
    // 获取当前数据
    getDeptData () {
    },
    handleNodeClick () {},
    loadNode (node, resolve) {
      getDept({ pid: node.data?.id }).then(res => {
        setTimeout(() => {
          resolve(res.content)
        }, 500)
      })
      // if (node.level === 0) {
      //   getDept().then(res => {
      //     return resolve(res.content)
      //   })
      // } else {
      //   getDept({ pid: node.data.id }).then(res => {
      //     return resolve(res.content)
      //   })
      // }
    },
    mounted () {

    }
  }
}
</script>

<style lang='scss' scoped>

</style>
